<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
			@keyframes myliu{
				0%{width:700px;height:780px;}
				5%{width:681px;height:761px;}
				10%{width:662px;height:742px;}
				15%{width:643px;height:723px;}
				20%{width:624px;height:704px;}
				25%{width:605px;height:685px;}
				30%{width:586px;height:666px;}
				35%{width:567px;height:647px;}
				40%{width:548px;height:628px;}
				45%{width:529px;height:609px;}
				50%{width:510px;height:590px;}
				55%{width:491px;height:571px;}
				60%{width:472px;height:552px;}
				65%{width:453px;height:533px;}
				70%{width:434px;height:514px;}
				75%{width:415px;height:495px;}
				80%{width:396px;height:476px;}
				85%{width:377px;height:457px;}
				90%{width:358px;height:438px;}
				95%{width:339px;height:419px;}
				100%{width:320px;height:400px;}
			}
			#jixue{
				height: 780px;
				width: 700px;
				overflow: hidden;
				border: 2px solid red;
			}
			#jixue:hover{
				animation: myliu 3s ease-in 0s infinite;
			}
		</style>
	</head>
	<body>
		<div id="jixue" >
			<img src="../image/jixue.jpg"/>
		</div>
	</body>
</html>